<template>
  <!-- 登录/注册页面不显示侧边栏和顶栏 -->
  <router-view v-if="isAuthPage"></router-view>

  <!-- 认证后的页面，显示完整布局 -->
  <el-container class="layout-container" v-else>
    <el-aside width="200px">
      <el-menu
        router
        :default-active="route.path"
      >
        <el-menu-item index="/">
          <el-icon><Monitor /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/cases">
          <el-icon><Files /></el-icon>
          <span>用例管理</span>
        </el-menu-item>
        <el-menu-item index="/execution">
          <el-icon><VideoPlay /></el-icon>
          <span>执行管理</span>
        </el-menu-item>
        <el-menu-item index="/reports">
          <el-icon><PieChart /></el-icon>
          <span>报告分析</span>
        </el-menu-item>
        <el-menu-item index="/settings">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-container>
      <el-header>
        <div class="header-left">
          <h2>自动化测试平台</h2>
        </div>
        <div class="header-right">
          <el-dropdown @command="handleCommand">
            <span class="user-dropdown">
              {{ userStore.user?.username || '用户' }}
              <el-icon><CaretBottom /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import { Monitor, Files, VideoPlay, PieChart, Setting, CaretBottom } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from './stores/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 判断当前是否为认证页面（登录/注册）
const isAuthPage = computed(() => {
  return ['/login', '/register'].includes(route.path)
})

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  if (command === 'logout') {
    ElMessageBox.confirm('确定要退出登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      userStore.logout()
      router.push('/login')
    }).catch(() => {})
  } else if (command === 'profile') {
    // 跳转到个人信息页面
  }
}
</script>

<style scoped lang="scss">
.layout-container {
  height: 100vh;
  
  .el-aside {
    background: #545c64;
    
    .el-menu {
      border-right: none;
    }
  }
  
  .el-header {
    background: #fff;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .header-left {
      h2 {
        margin: 0;
      }
    }
    
    .header-right {
      .user-dropdown {
        cursor: pointer;
        display: flex;
        align-items: center;
      }
    }
  }
  
  .el-main {
    background: #f0f2f5;
    padding: 20px;
  }
}
</style> 